// 1. 创建一个名称扩展为 React.Component 的ES6 类

// 2. 创建一个叫做render()的空方法

// 3. 将函数体移动到 render() 方法中

// 4. 在 render() 方法中，使用 this.props 替换 props

// 5. 删除剩余的空函数声明

// 6. 为当前组件添加一个局部状态

// 7. 将this.props换成this.state

// 8. 给组件添加生命周期

// 9. 编写一个tick的函数,里面设定定时器,并且更新时间

// 10. 在componentDidMount中调用tick函数

// 11. 在componentWillUnmount这个钩子中卸载定时器
import React from "react"

class ClockG extends React.Component{
    constructor(){
        super()
        this.state={//局部状态
            timer:new Date().toLocaleTimeString()
        }
    }
    componentDidMount(){//虚拟dom渲染成了真实dom
        // 相当于vue里面的mounted 小程序里面的onReady
        this.tick()
    }
    componentWillUnmount(){//组件即将卸载
        // 相当于vue里面的beforeDestory
        clearInterval(this.interval)

    }
    tick(){
        // 更新时间=>更新state中的状态
        // 小程序中如何更新状态？setData
        // react中调用setState，传递一个新的值
        this.interval = setInterval(() => {
            this.setState({
                timer:new Date().toLocaleTimeString()
            })
        },300)
    }
    render(){//属于react生命周期的一个钩子函数，该钩子函数的作用是：进行diff算法和更新虚拟dom
        // 视图需要更新，那么就需要调用render方法才能够进行更新
        return(
            <fieldset>
                <legend>时间滴答滴答的走</legend>
                <h1>北京时间：{this.state.timer}</h1>
            </fieldset>
        )
    } 
}

export default ClockG